{include file="public/header"}
<body>
<div id="app">
    <div class="ht-main">
        <div class="ht-search">
            <el-form :inline="true">
                <el-form-item label="名称" size="small">
                    <el-input size="small" placeholder="名称" v-model="searchKey.title"></el-input>
                </el-form-item>

                <el-form-item size="small">
                    <el-button type="success" size="small" icon="el-icon-search" @click="search">搜索</el-button>
                    <el-button type="" size="small" icon="el-icon-refresh" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="ht-tool">
            <div class="ht-tool-left">
                <ht-upload size="mini" @success="uploadSuccess"></ht-upload>
                <el-button type="danger" :disabled="!tableSelect.length" size="mini" icon="el-icon-delete" @click="batchDel('/admin/uploadify/attachmentDel')">删除</el-button>
            </div>
        </div>
        <div class="ht-main-body">
            <el-table :data="tableData" @selection-change="handleSelectChange" border header-row-class-name="ht-table-header">
                <el-table-column type="selection"></el-table-column>
                <el-table-column
                        prop="name"
                        label="图片" width="100px">
                    <template slot-scope="scope">
                        <ht-table-image :value="scope.row"></ht-table-image>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="名称">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="大小"
                        width="110px" :formatter="formatSize">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="path"
                        label="路径">
                </el-table-column>

                <el-table-column align="center"
                        prop="create_time"
                        label="添加时间"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作"
                        width="150">
                    <template slot-scope="scope">
                        <el-button @click="del(scope.row)"  size="mini" type="danger" icon="el-icon-delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="ht-main-page">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page"
                        :page-sizes="[1,10, 200, 300, 400]"
                        :page-size="limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </div>

    </div>
</div>
{include file="public/common"}
<script>
    let vs
    var vm = new Vue({
        el:"#app",
        data:function () {
            return {
                a:'123',
                arctypeList:[],
                activeTab:'first',
                tableData: [],
                content:'编辑',
                total:0,
                page:1,
                limit:10,
                search_arctype_id:"",
                search_title:"",
                editBody:'13123',
                pre_view:[],
                last_page:1,
            }
        },
        created:function() {
            vs = this
            this.getData()
        },
        methods: {
            formatSize(row) {
                var fileSizeByte = row.size;
                var fileSizeMsg = "";
                if (fileSizeByte < 1048576) fileSizeMsg = (fileSizeByte / 1024).toFixed(2) + "KB";
                else if (fileSizeByte == 1048576) fileSizeMsg = "1MB";
                else if (fileSizeByte > 1048576 && fileSizeByte < 1073741824) fileSizeMsg = (fileSizeByte / (1024 * 1024)).toFixed(2) + "MB";
                else if (fileSizeByte > 1048576 && fileSizeByte == 1073741824) fileSizeMsg = "1GB";
                else if (fileSizeByte > 1073741824 && fileSizeByte < 1099511627776) fileSizeMsg = (fileSizeByte / (1024 * 1024 * 1024)).toFixed(2) + "GB";
                else fileSizeMsg = "文件超过1TB";
                return fileSizeMsg;
            },
            uploadSuccess() {
                vs.getData()
            },
            getArctypeList() {
                var that = this
                axios.post('{:url("Arctype/arctypeList")}',{
                }).then((res)=>{
                    console.log("list",res.data)
                    that.arctypeList = res.data.data
                })
            },
            changeStatus:function(e,id) {
                axios.post("{:url('Archives/ArchivesStatus')}", {id:id}).then((res)=>{
                    if (res.data.code == 1) {
                        this.$message({
                            message:'操作成功',
                            type:'success',
                            duration:1000,
                        })
                    } else {
                        this.$message({
                            message:res.data.msg,
                            type:'error',
                            duration:1500,
                            onClose:function (){
                                location.reload()
                            }
                        })
                    }
                })
            },
            changeMenuStatus:function(e,id) {
                axios.post("{:url('Auth/menuStatus')}", {id:id}).then((res)=>{
                    if (res.data.code == 1) {
                        this.$message({
                            message:'操作成功',
                            type:'success',
                            duration:1000,
                        })
                    } else {
                        this.$message({
                            message:res.data.msg,
                            type:'error',
                            duration:1500,
                            onClose:function (){
                                location.reload()
                            }
                        })
                    }
                })
            },
            doSearch:function() {
                this.getData()
            },
            getIndex() {
                this.getData()
            },
            onSubmit() {
                var that = this
                that.editData.content = window.htEditor.getContent();
                $.post('{:url("Archives/archivesAdd")}',that.editData,function (res){
                    if (res.code == 1) {
                        that.showSuccessMsgCall(function (){
                            location.reload();
                        })
                    } else {
                        that.showErrorMsg(that,res.msg)
                    }
                })

            },
            getData:function() {
                var that = this
                axios.post('{:url("Uploadify/attachment")}',{
                    limit:that.limit,
                    page:that.page,
                    title:that.searchKey.title
                }).then((res)=>{
                    console.log(res.data)
                    that.tableData = res.data.data.data
                    that.last_page = res.data.data.last_page
                    that.total = res.data.data.total
                })
            },
            doAdd:function(){
                this.is_edit = true
                this.content = '添加'
                this.editData = this.editDataTemp
            },
            edit:function(data) {
                this.is_edit = true
                this.content = '编辑'
                this.editData = data
                console.log(data)
            },
            goBack:function(){
                this.is_edit = false
            },
            del:function(data) {
                var that = this
                that.$confirm('确定删除么?','提示',{
                    type:'warning',
                    lockScroll:false
                }).then(()=>{
                    axios.post('{:url("Uploadify/attachmentDel")}',{id:data.id}).then((res)=>{
                        let result = res.data;
                        if (result.code === 1) {
                            that.showSuccessMsgCall(function (){
                                that.getData()
                            })
                        } else {
                            that.showErrorMsg(result.msg)
                        }
                    })
                })
            },
            handleSizeChange:function(e) {
                this.limit = e
            },
            handleCurrentChange:function(e) {
                this.page = e
            }
        },
        watch:{
            page(v) {
                this.getData()
            },
            limit() {
                this.getData()
            }
        }
    })
</script>
</body>
</html>
